import authorInfoLess from "./index.module.less";
import { useSelector } from "react-redux";

const AuthorInfo = (prop: any) => {
  const UserId = useSelector((state: any) => state.user.UserId);
  return (
    <>
      <div className={authorInfoLess.authorinfo_content}>
        <div className="top_info">
          <div className="left_img">
            <img src={prop.AuthorMessage?.HeaderImg} alt="" />
          </div>
          <div className="right_info">
            <div className="name_author">
              <div className="name">{prop.AuthorMessage?.UserName}</div>
              <div className="grade">
                <img src="../../../public/icon/grade.avis" alt="" />
              </div>
            </div>
            <div className="user_title">
              {prop.AuthorMessage?.SelfDescription}
            </div>
            <div className="tab_content">
              <div className="items">作者榜No16</div>
              <div className="items">优秀作者</div>
            </div>
          </div>
        </div>
        <div className="center_info">
          <div className="messageInfoItems">
            <div className="num">{prop.AuthorMessage?.ArticleNum}</div>
            <div className="title">文章</div>
          </div>
          <div className="messageInfoItems">
            <div className="num">{prop.AuthorMessage?.ArticleNum}</div>
            <div className="title">阅读</div>
          </div>
          <div className="messageInfoItems">
            <div className="num">{prop.AuthorMessage?.Fans}</div>
            <div className="title">粉丝</div>
          </div>
        </div>
        {prop.ArticleInfo?.PublisherId !== Number(UserId) ? (
          <div className="btn_allcontent">
            <div className="follow_btn">关注</div>
            <div className="message_btn">私信</div>
          </div>
        ) : (
          ""
        )}
      </div>
    </>
  );
};

export default AuthorInfo;
